<template>
  <el-form ref="specialtyRef" label-width="80px">

    <el-table :data="specialty" style="width: 100%;">
      <el-table-column type="index" label="序号" width="100"/>
      <el-table-column label="特长名称">
        <template #default="scope">
          <el-input v-model="scope.row.name" placeholder="请输入特长名称" clearable/>
        </template>
      </el-table-column>
      <el-table-column label="熟练度">
        <template #default="scope">
          <el-input-number v-model="scope.row.value" max="100" min="1" placeholder="请输入特长熟练度" type="number" clearable/>
        </template>
      </el-table-column>
      <el-table-column label="样式类型" width="280">
        <template #default="scope">
          <el-radio-group size="small" v-model="scope.row.style">
            <el-radio label="success"><el-tag color="var(--el-color-success)" /></el-radio>
            <el-radio label="primary"><el-tag color="var(--el-color-primary)" /></el-radio>
            <el-radio label="exception"><el-tag color="var(--el-color-danger)" /></el-radio>
            <el-radio label="warning"><el-tag color="var(--el-color-warning)" /></el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
          <el-button link type="danger" size="small"
                     @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="onAddItem">
            添加
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px;float: right">
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
    </div>
  </el-form>
</template>

<script setup>
import {updateFlag, saveUserSpecialty, state, getUserProfile} from "@/api/system/user";

const props = defineProps({
  specialty: {
    type: Array
  }
});

props.specialty.length === 0 ? props.specialty.push({
  name: '',
  value: '',
  style: 'success'
}) : props.specialty


const form = ref();
const {proxy} = getCurrentInstance();

const deleteRow = (index) => {
  props.specialty.splice(index, 1)
}

const onAddItem = () => {
  props.specialty.push({
    name: '',
    value: '',
    style: 'success'
  })
}

/** 提交按钮 */
function submit() {
  for (const spec of props.specialty) {
    if (spec.name=== null || spec.name === '') {
      proxy.$modal.msgError('请输入特长名称');
      return;
    }
    if (spec.value === null) {
      proxy.$modal.msgError('请输入特长熟练度');
      return;
    }
    if (spec.style === null || spec.style === '') {
      proxy.$modal.msgError('请选择特长展示样式');
      return;
    }
  }
  // 调用特长保存
  saveUserSpecialty(props.specialty).then(response => {
    proxy.$modal.msgSuccess("修改成功");
    updateFlag.value = false;
  });
}

/** 关闭按钮 */
function close() {
  getUserProfile().then(response => {
    state.specialty = response.specialty;
  });
  updateFlag.value = false;
}
</script>

